<template>
    <div class="app-container">
        <!-- 查询等操作 -->
        <div class="filter-container">
            <el-input v-model="listQuery.username" clearable class="filter-item" style="width: 200px;"
                placeholder="请输入用户名" />
            <el-input v-model="listQuery.mobile" clearable class="filter-item" style="width: 200px;"
                placeholder="请输入手机号" />
            <el-button class="filter-item" type="primary" icon="el-icon-search" @click="handleFilter">查询</el-button>
            <el-button :loading="downloadLoading" class="filter-item" type="primary" icon="el-icon-download"
                @click="handleDownload">导出</el-button>
        </div>

        <!-- 查询结果 -->
        <el-table v-loading="listLoading" :data="list" size="small" element-loading-text="正在查询中" border fit
            highlight-current-row>
            <el-table-column align="center" width="100px" label="地址ID" prop="id" sortable />
            <el-table-column align="center" min-width="100px" label="用户ID" prop="userID" />
            <el-table-column align="center" min-width="100px" label="收货人" prop="name" />
            <el-table-column align="center" min-width="100px" label="手机号" prop="mobile"></el-table-column>
            <el-table-column align="center" min-width="100px" label="地址" prop="address">
                <template slot-scope="scope">
                    {{ scope.row.province + scope.row.city + scope.row.area + scope.row.address }}
                </template>
            </el-table-column>
            <el-table-column align="center" min-width="80px" label="默认" prop="isDefault">
                <template slot-scope="scope">
                    {{ scope.row.isDefault ? '是' : '否' }}
                </template>
            </el-table-column>
        </el-table>

        <Pagination v-show="total > 0" :total="total" :page.sync="listQuery.page" :limit.sync="listQuery.limit"
            @pagination="getList"></Pagination>
    </div>
</template>
<script>
import { listAddress } from "@/api/user"
import Pagination from "../../components/Pagination"
export default {
    name: 'UserAddress',
    components: {
        Pagination
    },
    data() {
        return {
            list: null,
            total: 0,
            listLoading: false,
            listQuery: {
                page: 1,
                limit: 20,
                name: undefined,
                userId: undefined,
                sort: 'add_time',
                order: 'desc'
            },
            downloadLoading: false
        }
    },
    methods: {
        getList() {
            this.loading = true,
                listAddress(this.listQuery).then(response => {
                    this.list = response.data.data.items
                    this.total = response.data.data.total
                    this.loading = false
                }).catch(() => {
                    this.list = []
                    this.total = 0
                    this.listLoading = false
                })
        },
        handleFilter() {
            this.listQuery.page = 1
            this.getList()
        },
        handleDownload() {

        }
    },
    mounted() {
        this.getList()
    },

}
</script>
<style lang="">
    
</style>